<template>
  <v-scale-screen
    :delay="0"
    :box-style="{
      backgroundColor: '#051735',
    }"
  >
    <el-carousel
      v-if="!virtualShow"
      trigger="click"
      height="1080px"
      :interval="interval * 1000"
      indicator-position="none"
      :arrow="arrow"
      @change="changeScene"
    >
      <el-carousel-item v-for="item in 3" :key="item">
        <Consumption
          v-if="item === 1"
          title="威士凯数智化车间 成型"
          :actual-list="actualList"
          :real-time="realTime"
          :near-x-list="nearXList"
          :near-y-list="nearYList"
          :data-count="dataCount"
          :water-x-list="waterXList"
          :water-y-list="waterYList"
          :electricity-x-list="electricityXList"
          :electricity-y-list="electricityYList"
        />
        <Schedule
          v-if="item === 2"
          title="威士凯数智化车间 成型"
          :schedule-list="scheduleList"
          :turnover-x-list="turnoverXList"
          :turnover-y-list="turnoverYList"
          :data-count="turnoverCount"
          :data-labels="turnoverLabels"
        />
        <F-q-c
          v-if="item === 3"
          title="威士凯数智化车间 成型"
          trend-title="验孔合格率趋势图"
          :data1="passData"
          :data2="inferior"
          :data3="scrapRate"
          :data4="scrapData"
          :pass-x-list="passXList"
          :pass-y-list="passRateList"
          :data-list="dataList"
        />
      </el-carousel-item>
    </el-carousel>
    <el-carousel
      v-if="virtualShow"
      trigger="click"
      height="1080px"
      :interval="interval * 1000"
      indicator-position="none"
      :arrow="arrow"
    >
      <el-carousel-item v-for="(i, k) in virtualList" :key="k">
        <Time-func />
        <img :src="i" style="width: 100%; height: 100%" />
      </el-carousel-item>
    </el-carousel>
  </v-scale-screen>
</template>
<script>
import { mapState } from "vuex";
import Consumption from "@/views/srceen/workshop/cp/Consumption";
import Schedule from "@/views/srceen/workshop/cp/Schedule";
import FQC from "@/views/srceen/workshop/cp/FQC";
import { getDaysInCurrentMonth, getDayOfMonth } from "@/utils/common";
import {
  getRealTimeRate,
  getTenDaysRate,
  getRateByTime,
  getWaterConsume,
  getElectricityConsume,
  getScheduleInfo,
  getTurnoverRate,
  getTurnoverRateByTime,
  getVerifyPassRate,
  getVerifyBadStatistics,
  getFirstArticlePassRate,
  getBadStatistics,
  getVerifyPassRateTrend,
  getPassRateRecord,
  getVirtualTurn,
  getVirtualDataById,
} from "@/api/srceen/workshop";
export default {
  components: {
    Consumption,
    Schedule,
    FQC,
  },
  data() {
    return {
      virtualShow: false, // 显示虚拟数据
      virtualList: [], // 虚拟数据
      actualList: [], // 实时统计
      realTime: {
        monthTarget: 0, // 本月目标
        accumulate: 0, // 累计
        monthRate: 0, // 本月达成率
        todayRate: 0, // 今日达成率
      },
      nearXList: [], // 近10天达成率x轴
      nearYList: [], // 近10天达成率y轴
      dataCount: [], // 达成率
      waterXList: [], // 水单耗x轴
      waterYList: [], // 水单耗y轴
      electricityXList: [], // 电单耗x轴
      electricityYList: [], // 电单耗y轴

      scheduleList: [], // 排产计划
      turnoverXList: [], // 周转率柱x轴
      turnoverYList: [], // 周转率柱y轴
      turnoverCount: [], // 周转率饼图
      turnoverLabels: ["当班周转率", "当天周转率", "当周周转率", "当月周转率"], // 周转率饼图
      passData: {
        id: "forming-pass",
        title: "验孔合格率",
        list: [
          { label: "生产PCS", value: 0 },
          { label: "检验PCS", value: 0 },
          { label: "不良率", value: 0 },
        ],
        label: "不良数",
        value: "",
        data: [],
      },
      inferior: {
        id: "forming-inferior",
        title: "验孔前五大不良统计",
        data: [],
        color: ["#f53f3f", "#2F7DF1", "#9C30CE", "#BFAE17", "#2fcdc4", "#d3d3d3"],
      },
      scrapRate: {
        id: "forming-scrap-rate",
        title: "成型报废率",
        list: [
          { label: "生产面积", value: 0 },
          { label: "报废面积", value: 0 },
          { label: "报废率", value: 0 },
        ],
        label: "报废面积",
        value: "",
        data: [],
      },
      scrapData: {
        id: "forming-scrap",
        title: "成型前五大报废统计",
        data: [],
        color: ["#f53f3f", "#2F7DF1", "#9C30CE", "#BFAE17", "#2fcdc4", "#d3d3d3"],
      },
      passRateList: [],
      passXList: [],
      dataList: [],
    };
  },
  computed: {
    ...mapState({
      interval: (state) => state.app.workshopDelay,
      arrow: (state) => state.app.workshopArrow,
    }),
  },
  mounted() {
    this.checkVirtual();
  },
  methods: {
    // 检测是否是虚拟数据
    checkVirtual() {
      getVirtualTurn().then((res) => {
        this.virtualShow = res.data;
        if (res.data) {
          this.getVirtualData();
        } else {
          this.changeScene(0);
        }
      });
    },
    // 切换大屏
    changeScene(e) {
      if (e === 0) {
        this.getConsumption();
      } else if (e === 1) {
        this.getSchedule();
      } else {
        this.getFQC();
      }
    },
    // 获取消耗信息
    getConsumption() {
      getRealTimeRate("forming").then((res) => {
        if (res.data) {
          this.realTime.monthTarget = res.data.value1 || 0;
          this.realTime.accumulate = res.data.value2 || 0;
          this.realTime.monthRate = res.data.value3 || 0;
          this.actualList = res.data.dayAchievementRateVOs.map((i) => {
            if (i.timeIsNow) {
              this.realTime.todayRate = i.completionRate || 0;
            }
            return {
              value: 1,
              name: i.timeIsNow ? `第${i.dayOfMonth || 0}天` : "",
              color: i.timeIsNow
                ? "#5589d8"
                : i.completionStatus === 1
                ? "#30c27c"
                : i.completionStatus === 2
                ? "#FF4545"
                : "#c2c2c2",
            };
          });
        }
      });
      getTenDaysRate("forming").then((res) => {
        if (res.data) {
          this.nearXList = res.data.xaxis || [];
          this.nearYList = [
            {
              data: res.data.target || [],
              name: "目标",
              type: "line",
              showSymbol: false,
            },
            {
              data: res.data.actual || [],
              name: "达成率",
              type: "bar",
              showSymbol: false,
            },
            {
              data: res.data.actual || [],
              name: "",
              type: "line",
              area: true,
              showSymbol: false,
            },
          ];
        }
      });

      getRateByTime("forming").then((res) => {
        if (res.data) {
          const { shiftRate, dayRate, weekRate, monthRate } = res.data;
          this.dataCount = [
            { data: shiftRate },
            { data: dayRate },
            { data: weekRate },
            { data: monthRate },
          ];
        } else {
          this.dataCount = [{ data: 0 }, { data: 0 }, { data: 0 }, { data: 0 }];
        }
      });

      getWaterConsume("forming").then((res) => {
        if (res.data) {
          this.waterXList = res.data.xaxis || [];
          this.waterYList = [
            {
              data: res.data.target || [],
              name: "水单耗目标",
              type: "line",
              showSymbol: false,
            },
            {
              data: res.data.actual || [],
              name: "实际单耗",
              type: "line",
              area: true,
              showSymbol: true,
            },
          ];
        }
      });

      getElectricityConsume("forming").then((res) => {
        if (res.data) {
          this.electricityXList = res.data.xaxis || [];
          this.electricityYList = [
            {
              data: res.data.target || [],
              name: "电单耗目标",
              type: "line",
              showSymbol: false,
            },
            {
              data: res.data.actual || [],
              name: "实际单耗",
              type: "line",
              area: true,
              showSymbol: true,
            },
          ];
        }
      });
    },
    // 获取排产计划信息
    getSchedule() {
      getScheduleInfo("forming").then((res) => {
        if (res.data) {
          this.scheduleList = res.data || [];
        }
      });

      getTurnoverRate("forming").then((res) => {
        if (res.data) {
          this.turnoverXList = res.data.xaxis || [];
          this.turnoverYList = [
            {
              data: res.data.actual || [],
              name: "实际生产",
              type: "bar",
            },
            {
              data: res.data.target || [],
              name: "目标",
              type: "line",
            },
          ];
        }
      });

      getTurnoverRateByTime("forming").then((res) => {
        if (res.data) {
          const { shiftRate, dayRate, weekRate, monthRate } = res.data;
          this.turnoverCount = [
            { data: shiftRate },
            { data: dayRate },
            { data: weekRate },
            { data: monthRate },
          ];
        } else {
          this.turnoverCount = [{ data: 0 }, { data: 0 }, { data: 0 }, { data: 0 }];
        }
      });
    },
    // 获取FQC
    getFQC() {
      getVerifyPassRate("forming").then((res) => {
        if (res.data) {
          this.passData.list[0].value = res.data.passNum || 0;
          this.passData.list[1].value = res.data.inspectNum || 0;
          this.passData.list[2].value = (res.data.defectRate || 0) + "%";
          this.passData.value = res.data.defectNum || 0;
          let days = getDaysInCurrentMonth();
          let day = getDayOfMonth();
          this.passData.data = [];
          for (let i = 1; i <= days; i++) {
            this.passData.data.push({
              value: 1,
              name: i == day ? `第${i}天` : "",
              color: i < day ? "#30c27c" : i === day ? "#5589d8" : "#c2c2c2",
            });
          }
        }
      });

      getVerifyBadStatistics("forming").then((res) => {
        if (res.data) {
          this.inferior.data = res.data.map((i) => {
            return {
              name: i.type?.trim(),
              value: Number(i.value || "0"),
            };
          });
        } else {
          this.inferior.data = [{ name: "", value: 0 }];
          this.inferior.color = ["#d3d3d3"];
        }
      });

      getFirstArticlePassRate("forming").then((res) => {
        if (res.data) {
          this.scrapRate.list[0].value = (res.data.outputArea || 0) + "m²";
          this.scrapRate.list[1].value = (res.data.scrapArea || 0) + "m²";
          this.scrapRate.list[2].value = (res.data.scrapRate || 0) + "%";
          this.scrapRate.value = (res.data.day.scrapArea || 0) + "m²";
          let days = getDaysInCurrentMonth();
          let day = getDayOfMonth();
          this.scrapRate.data = [];
          for (let i = 1; i <= days; i++) {
            this.scrapRate.data.push({
              value: 1,
              name: i == day ? `第${i}天` : "",
              color: i < day ? "#30c27c" : i === day ? "#5589d8" : "#c2c2c2",
            });
          }
        }
      });

      getBadStatistics("forming").then((res) => {
        if (res.data) {
          this.scrapData.data = res.data.map((i) => {
            return {
              name: i.type?.trim(),
              value: Number(i.value || "0"),
            };
          });
        } else {
          this.scrapData.data = [{ name: "", value: 0 }];
          this.scrapData.color = ["#d3d3d3"];
        }
      });

      getVerifyPassRateTrend("forming").then((res) => {
        if (res.data) {
          this.passXList = res.data.xaxis || [];
          this.passRateList = [
            {
              data: res.data.actual || [],
              name: "合格率",
              showSymbol: false,
            },
            {
              data: res.data.target || [],
              name: "目标",
              showSymbol: false,
            },
            {
              data: res.data.actual || [],
              name: "",
              showSymbol: true,
            },
          ];
        }
      });

      getPassRateRecord("forming").then((res) => {
        if (res.data) {
          this.dataList = res.data || [];
        }
      });
    },
    // 获取虚拟数据图片
    getVirtualData() {
      getVirtualDataById({ id: "FORMING" }).then((res) => {
        if (res.data) {
          let imgs = res.data.imgUrl || "";
          this.virtualList = imgs.split(",");
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-carousel__arrow {
  background-color: rgba(0, 119, 255, 0.1);
}
</style>
